
.center-enter {
    opacity: 0;
    transform: scale(1);
    
  }
  
  .center-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 500ms,transform 500ms;
  }
  
  .center-exit {
    opacity: 1;
    /* transform: scale(1); */
  }
  
  .center-exit-active {
    opacity: 0;
    transition: opacity 500ms;
  }


  .top-enter{
    top: -100%;
    opacity: 1;
  }

  .top-enter-active{
    top: 0px;
    opacity: 1;
    transition: top 300ms,opacity 300ms;
  }
  .top-exit{
    top: 0px;

  }
  .top-exit-active{
    top: -100%;
    transition: top 200ms;
  }